<template>
	<div class="u-page u-page-color-other">
		<div class="top-area">
			<div class="search">
				<u-search placeholder="请输入标题" v-model="keyword" :show-action="false" @search="search"></u-search>
			</div>
			<div class="tabs u-pt-10 u-pb-10">
				<div :class="current==0?'tabs-item-active':'tabs-item'">
					全部
				</div>
				<div :class="current==1?'tabs-item-active':'tabs-item'">
					最新
				</div>
				<div :class="current==2?'tabs-item-active':'tabs-item'">
					最热
				</div>
			</div>
		</div>
		<div class="bottom-area u-mt-15">
			<div class="notice-item" v-for="(item,index) in NoticesData">
				<div class="u-title u-fz-17">
					{{item.title}}
				</div>
				<div class="u-pt-10 u-fz-15 notice-item-content">
					{{item.content}}
				</div>
				<div class="u-cl-content u-pt-10 u-fz-15">
					{{item.createTime}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
      data() {
        return {
			keyword: '',
			current: 0,
			pageNum: 1,
			pageSize: 5,
			NoticesData: []
		};
      },
      
      onLoad(options) {
			//未登录跳转到登录页面
			var loginRes = this.checkLogin();
			if (loginRes) {
				this.getNoticesData()
			}
	  },
	  
	  onShow() {
	  	
	  },
    
      mounted() {
      },
    
      onReady() {
         
      },
	  
	  onReachBottom() {
	  	  
	  },
    
      methods: {
		  
			/**
			* 获取公告列表数据
			*/
			async getNoticesData(){
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/space/notice/list",
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					title: this.keyword,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					if (this.pageNum != 1) {
						this.NoticesData = this.NoticesData.concat(result.rows)
					} else {
						this.NoticesData = result.rows
					}
				}
			},
			
			async search() {
				this.pageNum = 1
				this.getNoticesData()
			}
			
	  },
    };
</script>

<style scoped>
	.top-area {
		background-color: #ffffff;
		width: 90%;
		margin: 0 auto;
	}
	.search {
		
	}
	.bottom-area {
		
	}
	.tabs {
		display: flex;
		font-size: 32rpx;
	}
	.tabs-item {
		width: 100rpx;
	}
	.tabs-item-active {
		width: 100rpx;
		color: #e55e97;
	}
	.notice-item{
		width: 93%;
		margin: 0 auto;
		height: 350rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-top: 15rpx;
	}
	.notice-item-content{
		width: 330px;
		height: auto;
		display:-webkit-box;
		overflow: hidden; /*超出隐藏*/
		text-overflow: ellipsis;/*隐藏后添加省略号*/
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:3; //想显示多少行
	}
</style>